<!--
 * @Author: egg1bro
 * @Date: 2023-01-13 22:58:59
 * @LastEditTime: 2023-01-14 14:49:06
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\personInfo\resetPassword.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <!-- 导航栏 -->
    <div class="nav">
        <van-nav-bar title="重置密码">
            <template #left>
                <van-icon name="arrow-left" size="20" color="#3c3c3c" @click="goForgetPassword" />
            </template>
        </van-nav-bar>
    </div>
    <div class="body">
        <van-cell-group inset class="ipt">
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="newPassword" type="tel" placeholder="新密码" clearable />
        </van-cell-group>
    </div>
    <!-- 登录按钮 -->
    <div class="lgbtn" @click="submitPassword">
        <van-button square block type="primary" native-type="submit">
            确认
        </van-button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUpdateUserInfo } from '@/stores/updateUserInfo'
// 实例化路由
const router = useRouter()
// 实例化仓库
const updateUserInfo = useUpdateUserInfo()

const { getResetUserPassword } = updateUserInfo

const newPassword = ref('')

// to forgetPassword页面
const goForgetPassword = () => {
    router.push('/forgetPassword')
}

// 提交修改密码
const submitPassword = async () => {
    try {
        await getResetUserPassword({ password: newPassword.value })
    } catch (error) {
        return Promise.reject(error)
    }
}


</script>

<style lang="less" scoped>
.nav {
    .van-hairline--bottom:after {
        border-bottom-width: 0;
    }
}

.lgbtn {
    margin: 30px 30px 10px 30px;
}
</style>